<template>
  <div
    ref="ref_rich"
    class="rich-com"
    :style="isViewCpt ? `max-height: ${height}px` : `height: ${height}px;`"
  >
    <template v-if="isViewCpt">
      <div
        style="
          width: 100%;
          max-height: 100%;
          background-color: #ffffff;
          overflow-y: auto;
        "
        v-html="state.paramVal"
      ></div>
    </template>
    <template v-else>
      <Editor
        v-model:modelValue="state.paramVal"
        api-key="no-api-key"
        :init="state.initConfig"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, inject, computed, ref } from 'vue'
import { isValue } from '@/utils/czr-util'
import Editor from '@tinymce/tinymce-vue'
import { fileUploadFile } from '@/api/modules/global/upload'

const emit = defineEmits(['emitParam', 'emitEnter'])
const props = defineProps({
  param: {},
  label: {},
  height: { default: 400 },
  disabled: {
    default: false,
  },
})
const state = reactive({
  paramVal: props.param,
  formView: inject('form-view', false),
  quill: null,
  initConfig: {
    setup: (editor) => {
      initOverlayZIndex()
    },
    document_base_url: 'http://localhost/',
    language: 'zh_CN',
    branding: false, // 是否显示 TinyMCE 品牌
    statusbar: false, //最下方的元素路径和字数统计那一栏是否显示
    placeholder: '请输入' + props.label,
    highlight_on_focus: true,
    menu: {
      file: { title: 'File', items: 'newdocument | preview | print' },
      view: {
        title: 'View',
        items: 'code | preview fullscreen | showcomments',
      },
      insert: {
        title: 'Insert',
        items: 'image link inserttable | charmap | insertdatetime',
      },
      format: {
        title: 'Format',
        items:
          'bold italic underline strikethrough superscript subscript | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat',
      },
    },
    toolbar:
      'fullscreen | code forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify outdent indent  lineheight | subscript superscript removeformat | table image',
    plugins:
      'code preview fullscreen image link table charmap insertdatetime wordcount',
    content_style: `
          p { margin: 0 }
          ::-webkit-scrollbar { width: 6px !important; height: 6px; }
          ::-webkit-scrollbar-track { width: 6px; background-color: transparent;-webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
          ::-webkit-scrollbar-thumb { background-color: rgba(1, 15, 58, 0.2); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
          ::-webkit-scrollbar-thumb:hover { background-color: rgba(1, 15, 58, 0.3); }
        `, // 内容样式
    contextmenu: false,
    images_upload_handler: (blobInfo, progress) =>
      new Promise((resolve, reject) => {
        const formData = new FormData()
        formData.append('file', blobInfo.blob())
        fileUploadFile(formData)
          .then(({ data }: any) => {
            resolve(data.path)
          })
          .catch(() => {
            resolve('图片上传失败！')
          })
          .finally(() => {})
      }),
  },
})
const ref_rich = ref()
watch(
  () => state.paramVal,
  (n) => {
    emit('emitParam', n)
  },
)
watch(
  () => props.param,
  (n) => {
    state.paramVal = n
  },
)
const isViewCpt = computed(() => {
  return state.formView || props.disabled
})
// 动态设置外出弹窗z值，兼容弹窗
const initOverlayZIndex = () => {
  let z = 0
  let timer: any = null
  const deepZ = (dom) => {
    if (dom.className.split(' ').includes('el-overlay')) {
      z = dom.style.zIndex
    } else if (dom.parentElement) {
      deepZ(dom.parentElement)
    }
  }
  deepZ(ref_rich.value)
  if (z > 0) {
    timer = setInterval(() => {
      const tox = document.getElementsByClassName('tox-silver-sink')?.[0]
      if (tox) {
        tox.style.zIndex = z
        clearInterval(timer)
        timer = null
      }
    }, 1000)
  }
}
</script>

<style scoped lang="scss"></style>
